<template>
  <ve-ring
    :judge-width="true"
    :loading='loading'
    :data='chartData'
    :settings='chartSettings'
    :extend='chartExtend'
    height="420px"
  />
</template>

<script>
import ringMixin from '@/mixins/sf/ring-mixin'

export default {
  mixins: [ringMixin],
  inject: ['subtitle'],
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    rawData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    this.chartSettings = {
      radius: [5, 65],
      offsetY: 300,
      digit: 2
    }
    return {
      chartData: {
        columns: ['mode', 'quantity'],
        rows: this.rawData
      }
    }
  },
  watch: {
    rawData (val) {
      const buffer = val.map(item => {
        let _item = Object.assign({}, item)
        const percent = (_item.percent * 100).toFixed(2)
        _item.mode = `${item.mode}：${percent}%`
        delete _item.percent
        return _item
      })
      this.$set(this.chartData, 'rows', buffer.concat())
    }
  },
  created () {
  }
}
</script>
